import { norInject } from '@/models';
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';
import { Text, View } from '@tarojs/components';
import i18n from 'i18n-js';
import { observer } from 'mobx-react';
import React, { ReactNode } from 'react';
import Modal from '../Modal';

const dstyles = GStyleSheet.create({
  windows: {
    backgroundColor: DynamicColors.cardBackgroundColor,
    borderRadius: 10,
    width: 280,
  },
  title: {
    padding: 20,
    textAlign: 'center',
  },
  titleText: {
    fontSize: 18,
    color: DynamicColors.titleTextColor,
    fontWeight: '500',
  },
  subTitle: {
    color: DynamicColors.subTitleTextColor,
    fontSize: 12,
  },
  content: {
    textAlign: 'center',
    padding: 20,
    paddingTop: 0,
  },
  contentText: {
    color: DynamicColors.normalTextColor,
    fontSize: 16,
    lineHeight: '18px',
  },
  buttons: {
    display: 'flex',
    borderTopStyle: 'solid',
    borderTopColor: '#F1F1F1',
    borderTopWidth: 1,
    flexDirection: 'row',
  },
  button: {
    flex: 1,
    height: 50,
  },
  buttonText: {
    textAlign: 'center',
    fontSize: 16,
    color: DynamicColors.normalTextColor,
  },
  buttonSpace: {
    width: 1,
    height: 50,
    backgroundColor: '#F1F1F1',
  },
});

export interface IButton {
  text: string;
  onClick: (index: number) => any;
  color: any;
}

interface IProps {
  visible: boolean;
  title?: string | ReactNode;
  titleStyle?: CSSProperties;
  subTitle?: string;
  content?: string | ReactNode;
  okText?: string | ReactNode;
  cancelText?: string | ReactNode;
  onCancel?: () => void;
  onConfirm?: () => void;
  subTitleStyle?: CSSProperties;
  zIndex?: number;
}

@norInject()
@observer
export default class Alert extends React.Component<IProps, {}> {
  render() {
    const styles = dstyles.style;
    const {
      visible,
      title,
      titleStyle,
      subTitle,
      content,
      okText,
      cancelText,
      onCancel,
      onConfirm,
      subTitleStyle,
      zIndex,
    } = this.props;
    return (
      <Modal visible={visible} mask zIndex={zIndex}>
        <View style={styles.windows}>
          {/* header */}
          <View style={{ ...styles.title, ...titleStyle }}>
            {title && (typeof title === 'string' ? <Text style={styles.titleText}>{title}</Text> : title)}
            {!!subTitle && (
              <View>
                <Text style={{ ...styles.subTitle, ...subTitleStyle }}>{subTitle}</Text>
              </View>
            )}
          </View>

          {/* body */}
          {!!content && (
            <View style={styles.content}>
              {content && typeof content === 'string' ? <Text style={styles.contentText}>{content}</Text> : content}
            </View>
          )}
          {/* footer */}
          <View style={styles.buttons}>
            {!!onCancel && (
              <View style={styles.button} className='centerFlex' onClick={onCancel}>
                {cancelText ? cancelText : i18n.t('CANCEL')}
              </View>
            )}
            {!!onCancel && !!onConfirm && <View style={styles.buttonSpace} />}
            {!!onConfirm && (
              <View style={styles.button} onClick={onConfirm} className='centerFlex'>
                {okText ? okText : i18n.t('CONFIRM')}
              </View>
            )}
          </View>
        </View>
      </Modal>
    );
  }
}
